<template>
    <div class="app-container" style="padding: 20px;">
        <div>
            <el-button @click="()=>triggerModify()">添加</el-button>
        </div>
        <el-table
                ref="multipleTable"
                :data="lists"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="(rows)=>selectRows=rows">
            <el-table-column
                    type="selection"
                    width="25">
            </el-table-column>

            <el-table-column
                    label="id" prop="id">
            </el-table-column>

            <el-table-column
                    label="name" prop="name">
            </el-table-column>

            <el-table-column
                    label="uuidKey" prop="uuidKey">
            </el-table-column>

            <el-table-column
                    label="moduleName" prop="moduleName">
            </el-table-column>

            <el-table-column
                    label="description" prop="description">
            </el-table-column>

            <el-table-column
                    label="fieldType" prop="fieldType">
                <template slot-scope="scope">
                    {{getTypeNameStr(scope.row.fieldType)}}
                </template>
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="操作"
                    fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" @click="()=>triggerModify(scope.row)">修改</el-button>
                    <el-popconfirm
                            placement="bottom"
                            width="200"
                            trigger="click"
                            title="确定删除吗?"
                            @confirm="()=>deleteOne(scope.row.id)">
                        <el-button slot="reference" type="text" style="padding-left: 10px;">删除</el-button>
                    </el-popconfirm>


                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="padding: 20px;"
                :page-size="filter.pageSize"
                layout="prev, pager, next"
                :total="filter.total"
                @size-change="(pageSize)=>{$data.filter.pageSize=pageSize;lists=[];ajaxList();}"
                @current-change="(pageNum)=>{$data.filter.pageNum=pageNum;lists=[];ajaxList();}"
        >
        </el-pagination>

        <!--弹出框-->
        <modify class="vue" ref="modifyDialog" @refresh="()=>ajaxList()"></modify>
    </div>
</template>
<script>


    export default {
        components: {
            modify: () => import('./modify')
        },
        data() {
            return {
                filter: {
                    pageNum: 0,
                    pageSize: 10,
                    total: 0,
                },
                lists: [],
                selectRows: [],
                showModify: false,
                fieldTypeList: [],
                fieldTypeListMap:{},
            }
        },
        async mounted() {
            await this.ajaxFieldTypeList()
            this.ajaxList();
        },
        methods: {
            getTypeNameStr(id){
                if(this.$data.fieldTypeListMap[id]){
                    return this.$data.fieldTypeListMap[id].description
                }
                return "";

            },
            async deleteOne(id){
                var result = await axios.get('/springboot6379/moduleField/delete?id='+id).then(res => res.data).then(res => res.result)
                this.ajaxList();
            },
            triggerModify(data) {
                this.$refs['modifyDialog'].init(data)
            },
            async ajaxList() {
                var _params = {}
                console.log("[get]  /moduleField/page")
                console.log('参数', JSON.stringify(_params))
                var result = await axios.get('/springboot6379/moduleField/page?pageNum=' + this.filter.pageNum + '&&pageSize=' + this.filter.pageSize + '', _params).then(res => res.data).then(res => res.result)
                console.log("eField/page 结果", result)
                this.lists = result.records
                this.filter.total = Number(result.total)
                this.filter.pageSize = Number(result.size)

            },
            async ajaxFieldTypeList() {
                var _params = {}
                console.log("[get]  /moduleField/page")
                console.log('参数', JSON.stringify(_params))
                var result = await axios.get('/springboot6379/fieldType/listAll?pageNum=' + this.filter.pageNum + '&&pageSize=' + this.filter.pageSize + '', _params).then(res => res.data).then(res => res.result)
                console.log("fieldTypeList 结果", result)
                this.fieldTypeList = result
                this.fieldTypeListMap={}
                this.fieldTypeList.map((value)=>{
                    this.fieldTypeListMap[value.id]=value
                })

            }
        }
    }
</script>



